/**
 * @ignore
 * BEGIN HEADER
 *
 * Contains:        Application menu styles
 * CVM-Role:        CSS
 * Maintainer:      Hendrik Erz
 * License:         GNU GPL v3
 *
 * Description:     This file contains the styles for the custom application
 *                  menu which is being used on all non-macOS platforms.
 *
 * END HEADER
 */

body {
  div.application-menu {
    background-color: rgb(230, 230, 230);
    border: 1px solid rgb(180, 180, 180);
    position: fixed;
    overflow-y: auto; // In case the menu is too small, enable scrolling
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, .3);
    min-width: 150px;
  
    div.menu-item {
      height: 25px;
      line-height: 25px;
      overflow: hidden;
      margin: 5px;
      padding: 0 5px;
      display: grid;
      grid-template-columns: 50px auto 100px;
      grid-template-rows: 100%;
      grid-template-areas: "status label after";

      &:not(.separator):not(.disabled):hover {
        background-color: rgb(200, 200, 200);
      }
  
      div.status {
        grid-area: status;
        text-align: center;
      }
      div.after-element {
        grid-area: after;
        text-align: right;
      }
      div.label {
        grid-area: label;
        text-align: left;
      }
  
      // Separators are obviously very small
      &.separator {
        height: 1px;
        border-bottom: 1px solid rgb(180, 180, 180);
      }
    }
  }

  &.dark {
    div.application-menu {
      border: 1px solid #666;
      background-color: #333;
      color: #eee;
    
      div.menu-item {
        div.after-element { color: #aaa; }
    
        &.disabled { color: #aaa; }
    
        // Separators are obviously very small
        &.separator { background-color: #666; }
    
        &:not(.separator):not(.disabled):hover { background-color: #999; }
      }
    }    
  }
}
